<template>
  <van-overlay :show="show" class-name="default-new-dialog-outer">
    <div class="default-new-dialog">
      <!-- <div @click=""></div> -->
      <div class="dialog-content" v-html="content"></div>
      <div class="dialog-button" v-if="confirmBtn">
        <SButton popconfirm @click="closeDialog">再想想</SButton>
        <SButton popconfirm @click="submitDialog" type="primary">确认</SButton>
      </div>
      <div class="dialog-button" v-else>
        <SButton alert type="primary" @click="closeDialog">{{ alertText }}</SButton>
      </div>
    </div>
  </van-overlay>

  <!-- <div slot="footer">ddd</div> -->
</template>
<script lang="ts">
  import { defineComponent, ref } from 'vue';
  import { SButton } from '@/components/button/index';
  import { Overlay } from 'vant';
  import { debounce } from '@/utils/lodashChunk';
  export default defineComponent({
    props: {
      close: {
        type: Function,
      },
      content: {
        type: String,
        default: '暂无权限',
      },
      title: {
        type: String,
        default: '提示',
      },
      confirmBtn: {
        type: Boolean,
        default: false,
      },
      submit: {
        type: Function,
      },
      alertText: {
        type: String,
        default: '知道了',
      },
    },
    components: {
      SButton,
      'van-overlay': Overlay,
    },
    setup(props, { emit }) {
      const closeDialog = () => {
        props.close?.();
        show.value = false;
      };

      const submitDialog = debounce(() => {
        props.submit?.();
        show.value = false;
        props.close?.();
      }, 300);
      const dialogVisible = ref(true);
      const show = ref(true);
      return {
        dialogVisible,
        closeDialog,
        submitDialog,
        show,
      };
    },
  });
</script>
<style lang="scss" scoped>
  // 重置dialog
  .default-new-dialog-outer {
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 999;
  }
  .default-new-dialog {
    width: 400px;
    min-height: 232px;
    max-height: 288px;
    background: #fff;
    // position: fixed;
    // top: 0;
    // left: 0;
    // right: 0;
    // bottom: 0;
    // margin: auto;
    transition: 0.2s;
    border-radius: 10px;
    padding: 80px 48px 32px;
    .dialog-content {
      min-height: 116px;
      font-size: 28px;
      color: #000;
      text-align: center;
      padding-bottom: 42px;
      line-height: 50px;
    }
    .dialog-button {
      display: flex;
      align-items: flex-end;
      justify-content: space-between;
      height: 80px;
    }
  }
</style>
